<template>
  <vxe-pulldown class="edit-down-pulldown"  ref="xDown" transfer  >
    <template v-slot>
      <el-select  ref="mySelect" clearable :filter-method = "filterMethod" v-model="selectValue"  @clear="selectClear"  filterable placeholder="请选择">
        <el-option
          v-for="item in searchedList"
          :key="item.label"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
    </template>
  </vxe-pulldown>
</template>

<script>
/*eslint-disable*/
export default {
  name: 'FortenSelect',
  props: {
    params: Object,
    renderOpts: Object
  },
  data() {
    return {
      data: [],
      property: {},
      renderProps: {},
      datas: [],
      list: [],
      searchedList: [],
      selectValue: '',
      options: 'options'
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      const {data, property } = this.params //行、列数据
      this.data = data || {}
      this.property = property
      this.renderProps = this.renderOpts.props || {}
      this.list = this.renderProps[this.options]
      this.datas = this.list
      this.searchedList = this.list
      let that = this
      $(this.$refs.mySelect.$el).find('.el-input__inner').on('change', function(){
        that.selectEvent($(this).val() )
      });
    },
    //值变化
    selectEvent(value) {
      const { renderOpts, property, data } = this.params
      this.renderOpts.props.self.tableForm.data[property] = value
      this.renderOpts.props.self.fetchData()
    },
    //清除选项
    selectClear() {
      this.selectEvent(null)
      this.searchedList = this.list
    },
    //聚焦后
    filterMethod(key) {
      this.searchedList = this.list.filter(ob => ob.label.indexOf(key) > -1
        || this.pyutils.getAllFirstLetter(ob.label).toLowerCase().indexOf(key.toLowerCase()) > -1
        || this.pyutils.chineseToPinYin(ob.label).toLowerCase().indexOf(key.toLowerCase()) > -1)
    }
  },
  watch:{
    //selectValue变化后
    selectValue:{
      handler(newValue, oldValue) {
        this.selectEvent(newValue)
      }
    }
  }
}
</script>

<style lang="scss">
  .down-pulldown {
    width: 100%;
  }
  .down-input{
    width: 94%;
    /*更改输入框为手型*/
    .vxe-input--inner,.vxe-input--suffix{
      cursor: pointer;
    }
    .vxe-input--inner{
      /*跟表单区域宽度保持一致*/
      width: 106%;
    }
    .vxe-input--suffix{
      right: 0px;
    }
  }
  .dropdown {
    height: 200px;
    overflow: auto;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
  }
  .list:hover {
    background-color: #f5f7fa;
  }
  .vxe-input--inner {
    height: 98%;
  }
</style>
